<template>
    <el-container style="text-align: right; font-size: 12px">
        <!--********** 头部 -->
        <el-header style="height:auto">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto">
            <div class="mo_login">

                <div class="login_cont"
                     v-loading="loading"
                     element-loading-text="正在注册中...请稍等"
                     element-loading-spinner="el-icon-loading"
                     element-loading-background="#fff">
                    <div class="login_addtitle">
                        <p>注册</p>
                    </div>
                    <!-- *********** -->
                    <el-form :model="ruleForm"
                             status-icon
                             :rules="rules"
                             ref="ruleForm"
                             label-width="30px"
                             class="demo-ruleForm">
                        <el-form-item label=""
                                      prop="compellation">
                            <el-input v-model="ruleForm.compellation"
                                      placeholder="请输入真实姓名">
                            </el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      prop="phone">
                            <el-input v-model="ruleForm.phone"
                                      ref='ele'
                                      oninput="value=value.replace(/[^\d]/g,'')"
                                      :minlength="11"
                                      :maxLength='11'
                                      placeholder="请输入11位手机号码"
                                      @change="addvesternumber()">
                            </el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      prop="username">
                            <el-input v-model="ruleForm.username"
                                      placeholder="账号请输入6-20位字母和数字组合">
                            </el-input>
                        </el-form-item>

                        <el-form-item label=""
                                      prop="password">
                            <el-input type="password"
                                      v-model="ruleForm.password"
                                      placeholder="请输入密码"
                                      autocomplete="off">
                            </el-input>
                        </el-form-item>
                        <el-form-item label=""
                                      prop="checkpassword">
                            <el-input type="password"
                                      v-model="ruleForm.checkpassword"
                                      placeholder="请再次输入密码"
                                      autocomplete="off"
                                      @keyup.enter.native="submitForm('ruleForm')">
                            </el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary"
                                       @click="submitForm('ruleForm')">立即注册</el-button>
                        </el-form-item>
                        <el-form-item>
                            <span class="location-left"
                                  @click="ToLogin()">使用已有账号登录?</span>

                            <!-- <el-link class="location-right"
                                     @click="ToLogin()">
                                <p class="addcolor"> 使用已有账号登录</p>
                            </el-link> -->
                        </el-form-item>
                    </el-form>

                </div>

            </div>
        </el-main>

        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";
export default {
    components: {
        eHeader,
        eFooter
    },
    data() {
        //姓名校验
        var validateCompellation = (rule, value, callback) => {
            let reg3 = /^[\u4e00-\u9fa5]{1,}((·[\u4e00-\u9fa5]{1,}){0,3})$/;
            if (!value) {
                return callback(new Error("姓名不能为空"));
            } else if (!reg3.test(value)) {
                return callback(new Error("姓名为2~10个汉字"));
            } else {
                callback();
            }
        };
        //电话校验
        var validatePhone = (rule, value, callback) => {
            let reg3 = /^[1][3-9][0-9]{9}$/;
            if (!value) {
                return callback(new Error("电话号码不能为空"));
            } else if (!reg3.test(value)) {
                return callback(new Error("请输入11位手机号"));
            } else {
                callback();
            }
        };
        //昵称校验
        var validateUsername = (rule, value, callback) => {
            let reg3 = /^(?![0-9]*$)(?![a-zA-Z]*$)[a-zA-Z0-9]{6,20}$/;
            if (value === "") {
                callback(new Error("请输入账号！"));
            } else if (!reg3.test(value)) {
                return callback(new Error("账号格式错误"));
            } else {
                callback();
            }
        };
        //密码校验
        var validatePass = (rule, value, callback) => {
            //let reg3 = /^(?![\d]+$)(?![a-zA-Z]+$)(?![^\da-zA-Z]+$)([^\u4e00-\u9fa5\s]){6,20}$/;
            let reg3 = /^\s*$/g;
            if (value === "") {
                callback(new Error("请输入密码！"));
            }
            //  else if (!reg3.test(value)) {
            //     return callback(new Error("密码格式错误"));
            // }
            else {
                if (this.ruleForm.checkPass !== "") {
                    this.$refs.ruleForm.validateField("checkPassword");
                }
                callback();
            }
        };
        //二次密码校验
        var validatePass2 = (rule, value, callback) => {
            let reg3 = /^\s*$/g;
            if (value === "") {
                callback(new Error("请再次输入密码！"));
            }
            //  else if (!reg3.test(value)) {
            //     return callback(new Error("密码格式错误"));
            // } 
            else if (value !== this.ruleForm.password) {
                callback(new Error("两次输入密码不一致!"));
            } else {
                callback();
            }
        };

        return {
            labelPosition: "top",
            ruleForm: {
                compellation: "",
                phone: "",
                username: "",
                password: "",
                checkpassword: ""
            },
            rules: {
                compellation: [{ validator: validateCompellation, trigger: "blur" }],
                phone: [{ validator: validatePhone, trigger: "blur" }],
                username: [{ validator: validateUsername, trigger: "blur" }],
                password: [{ validator: validatePass, trigger: "blur" }],
                checkpassword: [{ validator: validatePass2, trigger: "blur" }]
            },
            checked: false,
            height: "",
            loading: false,
        };
    },
    methods: {
        // 注册提交
        submitForm: throttle(function (formName) {
            const that = this;
            that.$refs[formName].validate((valid) => {
                if (valid) {
                    that.loading = true
                    let Params = {
                        username: that.ruleForm.username,
                        password: that.ruleForm.password,
                        name: that.ruleForm.compellation,
                        tel: that.ruleForm.phone,
                    };
                    that.$https.fetchPost("/regmem", Params).then(res => {
                        let resdata = res.data;
                        switch (resdata.code) {
                            case 1000:
                                that.loading = false
                                let adddata = resdata.data
                                that.showError("success", "注册成功");
                                //清空Cookie
                                that.clearCookie();
                                that.$router.push("/Login")
                                break;
                            case 1002:

                                that.loading = false
                                that.showError("error", resdata.msg + "，请重新输入");
                                break;
                        }
                    });
                } else {
                    return false;
                }
            });
        }, 1000),
        //清除cookie
        clearCookie: function () {
            this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
        },
        //设置cookie
        setCookie(c_name, c_pwd, exdays) {
            var exdate = new Date(); //获取时间
            exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
            //字符串拼接cookie
            window.document.cookie =
                "userName" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
            window.document.cookie =
                "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
        //跳转登录页
        ToLogin() {
            this.$router.push("/Login");
        },
        //手机号码监听
        addvesternumber() {
            const elem = this.$refs.ele
            if (elem.isOnComposition) {  // em..其实这个判断可以去了
                this.ruleForm.phone = elem.currentValue
            }

        }
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: hidden;
    padding: 0;
    border-radius: 0px;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    width: 100%;
    padding-top: 120px;
    height: 685px;
    overflow: hidden;
    background-image: url(../../assets/images/userimg.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }

    .login_cont {
        margin: 0 auto;
        padding: 15px 25px 28px 25px;
        width: 380px;
        height: 420px;
        border-radius: 8px;
        background: #ffffff;
        //box-shadow: $shadow-color;
        .el-form {
            .el-form-item__label {
                color: $btn-color;
            }
            .login_sub {
                text-align: center;
            }
            .el-button {
                width: 100%;
                font-size: 14px;
            }
        }
    }
}
.login_cont /deep/ .el-loading-spinner {
    font-size: 30px;
}

.login_addtitle {
    width: 100%;
    height: 30px;
    font-size: 20px;
    color: #1445ab;
    margin-bottom: 25px;
    text-align: center;
}
.login_addtitle p {
    letter-spacing: 10px;
}

.location-left {
    width: 50%;
    float: left;
    text-align: left;
    font-size: 12px;
    color: #909399;
    cursor: pointer;
}

.location-left :hover {
    color: #558ffb;
    text-decoration: underline;
}
.el-form-item {
    margin-right: 25px;
    margin-left: -5px;
}
.addcolor {
    color: #558ffb;
}
.addcolor:hover {
    color: #558ffb;
}

.el-form /deep/ .el-input__icon {
    color: #85ce61;
}
</style>
